<template>
  <div id="dynamicexample">
    <h2>Scroll down the page</h2>
    <input type="range" min="0" max="500" v-model="pinPadding" />
    <p v-pin:[direction]="pinPadding">
      Stick me {{ pinPadding + "px" }} from the {{ direction }} of the page
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      direction: "right",
      pinPadding: 200,
    };
  },
  directives: {
    pin: {
      mounted(el, binding) {
        el.style.position = "fixed";
        // binding.arg is an argument we pass to directive
        const s = binding.arg || "top";
        el.style[s] = binding.value + "px";
      },
      updated(el, binding) {
        const s = binding.arg || "top";
        el.style[s] = binding.value + "px";
      },
    },
  },
};
</script>

<style>
</style>